<template>
  <el-menu class="el-menu-vertical-demo" :collapse="isCollapse"
    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" default-active="/home">
    <h3 v-show="!isCollapse" style="color: #FFFFFF;">后台管理系统</h3>
    <h3 v-show="isCollapse" style="color: #FFFFFF;">后台</h3>
    <el-menu-item :index="item.path+''" v-for="item in noChildren" @click="clickMenu(item)">
      <i :class="'el-icon-'+item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>
    <el-submenu :index="item.path+''" v-for="item in hasChildren">
      <template slot="title">
        <i :class="'el-icon-'+item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </template>
      <el-menu-item :index="subItem.path+''" v-for="subItem in item.children" @click="clickMenu(subItem)" style="margin-left: 15px;">
        <i :class="'el-icon-'+subItem.icon"></i>
        <span slot="title">{{subItem.label}}</span>
      </el-menu-item>
    </el-submenu>

  </el-menu>
</template>

<script>
  export default {
    data() {
      return {
        menu: [
          {
            path: '/home',
            name: 'home',
            label: '首页',
            icon: 's-home',
            url: 'Home/Home'
          },
          {
            path: '/user_manage',
            name: 'userManage',
            label: '用户管理',
            icon: 'user-solid',
            url: 'User/UserManage'
          },
          {
            path: '/goods_manage',
            name: 'goodsManage',
            label: '商品管理',
            icon: 's-goods',
            url: 'Goods/GoodsManage'
          },
          {
            path: '/hb_manage',
            name: 'hbManage',
            label: '皇榜管理',
            icon: 's-fold',
            url: 'Hb/HbManage'
          },
          {
            path: '/log_manage',
            label: '日志管理',
            icon: 's-grid',
            children: [
              {
                path: '/user_log',
                name: 'userLog',
                label: '用户日志',
                icon: 'user',
                url: 'Log/UserLog'
              },
              {
                path: '/order_log',
                name: 'orderLog',
                label: '订单日志',
                icon: 'notebook-2',
                url: 'Log/OrderLog'
              },
              {
                path: '/search_es_log',
                name: 'searchEsLog',
                label: '商品日志',
                icon: 'goods',
                url: 'Log/SearchEsLog'
              },
              {
                path: '/serch_hb_log',
                name: 'searchHbLog',
                label: '皇榜日志',
                icon: 's-unfold',
                url: 'Log/SearchHbLog'
              },

            ]
          }
        ]
      };
    },
    methods: {
      clickMenu(item){
        this.$router.push({name: item.name});
        this.$store.commit("selectMenu",item);
      },
    },
    computed: {
      noChildren() {
        return this.menu.filter((item) => !item.children);
      },
      hasChildren() {
        return this.menu.filter((item) => item.children);
      },
      isCollapse(){
        return this.$store.state.tab.isCollapse;
      }
    },
  }
</script>


<style lang="scss" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    height: 100%;
  }
</style>
